<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://unpkg.zhimg.com/axios@1.0.0/dist/axios.min.js"></script>
	<title>Edit file</title>
		<style>
	* {
		margin:0;
		padding:0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-font-smoothing:antialiased;
		-moz-font-smoothing:antialiased;
		-o-font-smoothing:antialiased;
		font-smoothing:antialiased;
		text-rendering:optimizeLegibility;
		font-family:Microsoft Yahei, "Open Sans", Helvetica, Arial, sans-serif;
	}

	body {
		font-family:Microsoft Yahei, "Open Sans", Helvetica, Arial, sans-serif;
		font-weight:300;
		font-size: 12px;
		line-height:30px;
		color:#777;
		background:#F6CECE;
	}

	.container {
		max-width:400px;
		width:100%;
		margin:0 auto;
		position:relative;
	}
	#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"], #contact button[type="button"] { font:400 12px/16px Microsoft Yahei,"Open Sans", Helvetica, Arial, sans-serif; }

	#contact {
		background:#F9F9F9;
		padding:25px;
		margin:5px 0;
	}

	#div {
		background:#F9F9F9;
		padding:0px;
		margin:10px 0;
	}

	#contact h3 {
		color: #F96;
		display: block;
		font-size: 20px;
		font-weight: 400;
	}

	#contact h4 {
		font-size:13px;
	}

	fieldset {
		border: medium none !important;
		min-width: 100%;
		padding: 0;
		width: 100%;
	}

	#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
		width:100%;
		border:1px solid #CCC;
		background:#FFF;
		margin:0 0 5px;
		padding:10px;
	}

	#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
		-webkit-transition:border-color 0.3s ease-in-out;
		-moz-transition:border-color 0.3s ease-in-out;
		transition:border-color 0.3s ease-in-out;
		border:1px solid #AAA;
	}
	#contact button[id="commit"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#ffff66;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact button[id="update"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#FAAC58;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact button[id="back"] {
		cursor:pointer;
		width:100%;
		border:none;
		background:#00FF80;
		color:#000;
		margin:0 0 5px;
		padding:10px;
		font-size:15px;
	}
	#contact textarea {
		height:300px;
		max-width:100%;
	  resize:none;
	}
	#contact input:focus, #contact textarea:focus {
		outline:0;
		border:1px solid #999;
	}
	</style>
</head>
<body>
	<div class="container">
		<div id="contact">
			<h3>edit online</h3>
			<h4>commit button is save the edit text<br>update button is get the lastest file message<br>back button is back to home</h4>
			<form>
				<textarea id="text"></textarea>
				<button type="button" id="commit" onclick="saveText()">commit</button>
				<button type="button" id="update" onclick="updateText()">update</button>
				<button type="button" id="back" onclick="backLast()">back</button>
			</form>	
		</div>
	</div>
</body>
<script type="text/javascript">
	function saveText(){
		var value=document.getElementById("text").value;
		if(value.length>128)
		{
			alert("the text is too long(only ok less then 128");
			return;
		}
	  	axios.post("/edit/save", {
	  		"content":value
		}).then(function (response) {
			var status=JSON.parse(JSON.stringify(response.data))['status'];
			alert(status);
			location.reload();
		});
	}
	function updateText(){
		var temp=document.getElementById("text");
	  	axios.post("/edit/get", {
		}).then(function (response) {
			temp.value=JSON.parse(JSON.stringify(response.data))['content'];
		});
	}
	function backLast()
	{
		location.href="/"
	}
	updateText();
</script>
</html>
